<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="流程名称">
        <el-input
          v-model="queryParams.deploymentName"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:dept:add']"
        >新增
        </el-button>
      </el-form-item>
    </el-form>

    <!--流程部署表-->
    <el-table
      v-loading="deploymentLoading"
      :data="deploymentList"
      height="200px"
      border
      @row-click="getProcessDefinitionList"
    >
      <el-table-column label="部署ID" align="center" prop="id" width="200px"/>
      <el-table-column label="部署名称" align="center" prop="name"/>
      <el-table-column label="部署时间" align="center" prop="deploymentTime">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.deploymentTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:post:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            v-hasPermi="['system:post:remove']"
          >查看流程图
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div style="height: 15px"></div>

    <!--流程定义表-->
    <el-table
      v-loading="processDefinitionLoading"
      :data="processDefinitionList"
      height="200px"
      border
    >
      <el-table-column label="流程定义ID" align="center" prop="id"/>
      <el-table-column label="流程定义名称" align="center" prop="name"/>
      <el-table-column label="流程定义KEY" align="center" prop="key"/>
      <el-table-column label="流程定义版本" align="center" prop="version"/>
      <el-table-column label="部署ID" align="center" prop="deploymentId"/>
      <el-table-column label="资源文件名[bpmn]" align="center" prop="resourceName"/>
      <el-table-column label="资源文件名[png]" align="center" prop="diagramResourceName"/>
    </el-table>

    <pagination
      v-show="processDefinitionTotal>0"
      :total="processDefinitionTotal"
      :page.sync="processDefinitionTotalQueryParams.pageNum"
      :limit.sync="processDefinitionTotalQueryParams.pageSize"
      @pagination="getList"
    />


    <!-- 导入zip压缩文件部署流程 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body
               :before-close="handelUploadCancel">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="部署名称" prop="providerNum">
              <el-input v-model.trim="upload.deploymentName" placeholder="部署名称" maxlength="200" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="部署文件">
              <el-upload
                ref="upload"
                :limit="1"
                accept=".zip"
                :headers="upload.headers"
                :action="upload.url + '?deploymentName=' + upload.deploymentName"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“zip”格式文件！</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="handelUploadCancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 流程图显示弹框 -->
    <el-dialog
      :title="processTitle"
      :visible.sync="processOpen"
      width="800px"
      append-to-body
    >
      <img :src="processImgSrc" width="750px"/>

    </el-dialog>


  </div>
</template>

<script>
  import {getRepositoryList, getProcessDefinitionList, deleteDeployment, getProcessPic} from "@/api/process/workFlow"
  import {getToken} from "@/utils/auth";

  export default {
    name: "workFlow",
    data() {
      return {


        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deploymentName: '',

        },

        /*流程部署表格*/
        total: 0,
        deploymentList: [],
        deploymentLoading: false,

        /*流程定义*/
        processDefinitionLoading: false,
        processDefinitionList: [],
        processDefinitionTotal: 0,

        processDefinitionTotalQueryParams: {
          pageNum: 1,
          pageSize: 10,
          processDefinitionId: undefined
        },

        upload: {
          //上传时附带的额外参数
          deploymentName: undefined,
          open: false,
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/process/workFlow/deploymentProcess"

        },

        //查看流程图
        processTitle: "",
        processOpen: false,
        processImgSrc: "",


      }
    },
    methods: {
      getList() {
        this.deploymentLoading = true;
        getRepositoryList(this.queryParams).then(res => {
          this.deploymentList = res.rows;
          this.total = res.total;
          this.deploymentLoading = false;
        }).catch(error => {
          console.log(error);
        })
      },


      getProcessDefinitionList(row) {
        this.processDefinitionLoading = true;
        this.processDefinitionTotalQueryParams.processDefinitionId = row.id;
        getProcessDefinitionList(this.processDefinitionTotalQueryParams).then(res => {
          this.processDefinitionList = res.rows;
          this.processDefinitionTotal = res.total;
          this.processDefinitionLoading = false;
        }).catch(error => {
          console.log(error);
        })
      },


      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList()
      },

      handleAdd() {
        this.upload.title = "部署流程";
        this.upload.open = true;
      },

      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },

      //文件上传时
      handleFileUploadProgress() {
        this.upload.isUploading = true;
      },

      //文件上传成功后
      handleFileSuccess() {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.upload.deploymentName = null;
        this.$refs.upload.clearFiles();
        this.$message.success("部署流程成功");
        this.getList();
      },

      handelUploadCancel() {
        this.upload.deploymentName = null;
        this.upload.open = false;
        this.$refs.upload.clearFiles();
      },

      //删除流程部署
      handleDelete(row) {
        let _this = this;
        this.$confirm('是否确认删除部署流程?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          deleteDeployment(row).then(res => {
            _this.open = false;
            _this.getList();
            _this.$message.success('流程部署删除成功');
          }).catch(error => {
            console.log(error);
          })
        }).catch(e => {
        });
      },

      //查看流程图
      handleView(row) {
        this.processOpen = true;
        this.processTitle = row.name;
        let _this = this;
        //调用流程图接口
        getProcessPic(row.id).then(res => {
          _this.processImgSrc = "data:image/png;base64," + res.img;
        }).catch(error => {
          console.log(error);
        })


      },


    },

    created() {
      this.getList();
    }

  }
</script>

<style scoped>

</style>
